"use client";

import { useState, useEffect } from 'react';
import dynamic from 'next/dynamic';
import { Card } from "@/components/ui/card";
import { ArrowDown, ArrowUp, Users, DollarSign, ShoppingBag, TrendingUp } from 'lucide-react';

// 动态导入整个图表组件
const SalesLineChart = dynamic(() => import('../../components/SalesLineChart'), { ssr: false });
const VisitLineChart = dynamic(() => import('../../components/VisitLineChart'), { ssr: false });
const SalesBarChart = dynamic(() => import('../../components/SalesBarChart'), { ssr: false });

const storeRankings = [
  { name: "工专路0号店", sales: 323234 },
  { name: "工专路1号店", sales: 323234 },
  { name: "工专路2号店", sales: 323234 },
  { name: "工专路3号店", sales: 323234 },
  { name: "工专路4号店", sales: 323234 },
  { name: "工专路5号店", sales: 323234 },
  { name: "工专路6号店", sales: 323234 }
];

export default function MerchantDashboard() {
  const [isMounted, setIsMounted] = useState(false);

  useEffect(() => {
    setIsMounted(true);
  }, []);

  if (!isMounted) {
    return null; // 或者返回一个加载指示器
  }

  return (
    <div className="p-6 lg:p-8 space-y-8">
      <div className="grid gap-6 md:grid-cols-2 lg:grid-cols-4">
        {/* 总销售额 Card */}
        <Card className="p-6">
          <div className="flex items-center justify-between">
            <div>
              <p className="text-sm font-medium text-muted-foreground">总销售额</p>
              <h3 className="text-2xl font-bold">¥126,560</h3>
              <div className="flex items-center mt-1 space-x-2">
                <span className="text-sm text-amber-600">
                  <ArrowUp className="inline h-4 w-4" />
                  12%
                </span>
                <span className="text-sm text-muted-foreground">周同比</span>
                <span className="text-sm text-red-600">
                  <ArrowDown className="inline h-4 w-4" />
                  11%
                </span>
                <span className="text-sm text-muted-foreground">日同比</span>
              </div>
            </div>
            <div className="h-12 w-12 rounded-full bg-amber-100 flex items-center justify-center">
              <DollarSign className="h-6 w-6 text-amber-600" />
            </div>
          </div>
          <div className="mt-4">
            <p className="text-sm text-muted-foreground">
              日销售额 ¥12,423
            </p>
          </div>
        </Card>

        {/* 访问量 Card */}
        <Card className="p-6">
          <div className="flex items-center justify-between">
            <div>
              <p className="text-sm font-medium text-muted-foreground">访问量</p>
              <h3 className="text-2xl font-bold">8,846</h3>
              <div className="flex items-center mt-1">
                <span className="text-sm text-muted-foreground">日访问量 1,234</span>
              </div>
            </div>
            <div className="h-12 w-12 rounded-full bg-amber-100 flex items-center justify-center">
              <Users className="h-6 w-6 text-amber-600" />
            </div>
          </div>
          <div className="mt-4 h-[40px]">
            <VisitLineChart />
          </div>
        </Card>

        {/* 支付笔数 Card */}
        <Card className="p-6">
          <div className="flex items-center justify-between">
            <div>
              <p className="text-sm font-medium text-muted-foreground">支付笔数</p>
              <h3 className="text-2xl font-bold">6,560</h3>
              <div className="flex items-center mt-1">
                <span className="text-sm text-muted-foreground">转化率 60%</span>
              </div>
            </div>
            <div className="h-12 w-12 rounded-full bg-amber-100 flex items-center justify-center">
              <ShoppingBag className="h-6 w-6 text-amber-600" />
            </div>
          </div>
          <div className="mt-4 h-[40px]">
            <SalesBarChart />
          </div>
        </Card>

        {/* 运营活动效果 Card */}
        <Card className="p-6">
          <div className="flex items-center justify-between">
            <div>
              <p className="text-sm font-medium text-muted-foreground">运营活动效果</p>
              <h3 className="text-2xl font-bold">78%</h3>
              <div className="flex items-center mt-1 space-x-2">
                <span className="text-sm text-amber-600">
                  <ArrowUp className="inline h-4 w-4" />
                  12%
                </span>
                <span className="text-sm text-muted-foreground">周同比</span>
                <span className="text-sm text-red-600">
                  <ArrowDown className="inline h-4 w-4" />
                  11%
                </span>
                <span className="text-sm text-muted-foreground">日同比</span>
              </div>
            </div>
            <div className="h-12 w-12 rounded-full bg-amber-100 flex items-center justify-center">
              <TrendingUp className="h-6 w-6 text-amber-600" />
            </div>
          </div>
          <div className="mt-4">
            <div className="h-2 bg-amber-100 rounded-full">
              <div className="h-2 bg-amber-500 rounded-full" style={{ width: "78%" }} />
            </div>
          </div>
        </Card>
      </div>

      <div className="grid gap-6 lg:grid-cols-2">
        {/* 销售额趋势 Card */}
        <Card className="p-6">
          <h3 className="text-lg font-semibold mb-4">销售额趋势</h3>
          <div className="h-[300px] lg:h-[400px]">
            <SalesLineChart />
          </div>
        </Card>

        {/* 门店销售额排名 Card */}
        <Card className="p-6">
          <h3 className="text-lg font-semibold mb-4">门店销售额排名</h3>
          <div className="space-y-4">
            {storeRankings.map((store, index) => (
              <div key={index} className="flex items-center justify-between">
                <div className="flex items-center space-x-4">
                  <span className={`flex h-8 w-8 items-center justify-center rounded-full ${index < 3 ? "bg-amber-100 text-amber-600" : "bg-gray-100"}`}>
                    {index + 1}
                  </span>
                  <span>{store.name}</span>
                </div>
                <span className="font-medium">¥{store.sales.toLocaleString()}</span>
              </div>
            ))}
          </div>
        </Card>
      </div>
    </div>
  );
}
